<template>
  <div id="ViewContent">
    <!-- 消息列 -->
    <div class="msg_box">
      <!-- 左部头像 -->
      <div class="img_box">
        <img class="card_body_left_img"/>
      </div>
      <!-- 好友名称 -->
      <div class="name_box">
        <div class="name_text" v-if="viewlist.uid==ids">{{ username }} 回复 我:</div>
        <div class="name_text" v-else>我 回复 {{ username }}:</div>
        <!--<div class="name_text" v-else-if="1">我:</div>-->
      </div>
      <!-- 消息内容 -->
      <div class="msg_content">
        <div class="content_text">{{viewlist.content}}</div>
      </div>
      <!-- 时间 -->
      <div class="time_box">
        <div class="time_text">{{viewlist.time}}</div>
      </div>
      <div class="view_box">
        <!-- 删除 -->
        <Button type="primary" @click="modal1 = true">删除</Button>
        <!--<Button type="primary" @click="del(viewlist.id)">删除</Button>-->
        <Modal
          v-model="modal1"
          title="删除私信"
          @on-ok="del"
          @on-cancel="cancel">
          <p>你确定要删除这封私信吗？</p>
        </Modal>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ViewContent',
    inject: ['reload'],
    data () {
      return {
        modal1: false
      }
    },
    props: ['viewlist'],
    methods: {
      ok () {
        this.$Message.info('Clicked ok')
      },
      cancel () {
        this.$Message.info('Clicked cancel')
      },
      del () {
        this.axios.get('/api/delectLetter/', {
          params: {
            id: this.viewlist.id
          }
        }).then((response) => {
          if (response.status === 200) {
            this.$Message.success('删除成功!')
            // this.viewList.splice(this.id, 1)
            this.reload()
          } else {
            this.$Message.error('删除失败!')
          }
        })
          .catch((error) => {
            this.$Notice.error({
              title: '通知',
              desc: '接口，异常！'
            })
            console.info(error)
          })
      }
    },
    created () {
      this.ids = this.$route.params.ids
      this.username = this.$route.params.username
    }
  }
</script>

<style scoped>
  #ViewContent{
    height: auto;
    width: auto;
  }

  .msg_box{
    width: 600px;
    height: 90px;
    background-color: white;
    border-bottom: 1px solid #f0f2f7;
    float: left;
  }

  .img_box{
    height: 60px;
    width: 60px;
    float: left;
  }

  .card_body_left_img{
    height: 100%;
    width: 60px;
    float: left;
    background-color: rgba(184, 229, 248, 0.27);
    border-radius: 5px;
    cursor: pointer;
    margin-left: 10px;
    margin-top: 10px;
  }

  .name_box{
    width: auto;
    height: auto;
    float: left;
    margin-top: 15px;
    margin-left: 20px;
  }

  .name_text{
    font-size: 14px;
    color: #000;
  }

  .msg_content{
    width: 390px;
    height:auto;
    float: left;
    margin-top: 15px;
  }

  .content_text{
    font-size: 14px;
    color: #000000;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
  }

  .time_box{
    width: auto;
    height: auto;
    float: left;
    margin-left: 20px;
    margin-top: 10px;
  }

  .time_text{
    font-size: 14px;
    color: #5e677b;
  }

  .view_box{
    width: auto;
    height: auto;
    float: right;
    margin-right: 5px;
  }

</style>
